<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="Author" content="李艺江">
<title>问卷数据统计查看</title>
<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
}

a {
	text-decoration: none;
	padding-left: 2px
}

.container {
	position: relative;
	width: 100%;
	height: 100%;
}

.header {
	position: relative;
	width: 100%;
	height: 15%;
	background-color: #66CC00;
}

.divide {
	width: 100%;
	height: 1%;
	background-color: #DDDDDD;
}

.content {
	position: relative;
	width: 100%;
	height: 68%;
}

.content-left {
	width: 15%;
	height: 600px;
	float: left;
	background-color: #66CC00;
}

.content-right {
	width: 85%;
	height: 600px;
	float: left;
	background:
		url(${pageContext.request.contextPath }/pages/image/background.jpg);
}

.title {
	text-align: center;
}

.title font {
	font-size: 40px;
}

.user {
	text-align: right;
}

.user font {
	font-size: 20px;
}

.content-left div {
	width: 90%;
	background-color: #FFFFFF;
}

.content-left div li {
	height: 25px;
	background-color: #FFFFFF;
}

.message {
	height: 30px;
	color: red;
	font-size: 30px;
	padding-left: 2%;
}

.table-questionnaire, .table-questions {
	padding-left: 2%;
}

.table-questionnaire table, .table-questions table {
	border-collapse: collapse;
	background-color: #FFFFFF;
}

.col1-1 {
	border: solid #66CC00;
	border-width: 2px;
	width: 200px;
	text-align: center;
}

.col1-2 {
	border: solid #66CC00;
	border-width: 2px;
	width: 220px;
	text-align: center;
}

.col1-3 {
	border: solid #66CC00;
	border-width: 2px;
	width: 440px;
	text-align: center;
}

.col1-4 {
	border: solid #66CC00;
	border-width: 2px;
	width: 180px;
	text-align: center;
}

.col1-5 {
	border: solid #66CC00;
	border-width: 2px;
	width: 120px;
	text-align: center;
}

.col2-3 {
	border: solid #66CC00;
	border-width: 2px;
	width: 100px;
	text-align: center;
}

.col2-2 {
	border: solid #66CC00;
	border-width: 2px;
	width: 290px;
	text-align: center;
}

.col2-4, .col2-5, .col2-6, .col2-7, .col2-8 {
	border: solid #66CC00;
	border-width: 2px;
	width: 152px;
	text-align: center;
}

.table {
	width: 100%;
	padding-left: 2%;
}

.table table {
	border-collapse: collapse;
	background-color: #FFFFFF
}

.col1 {
	height: 26px;
	border: solid #66CC00;
	border-width: 2px;
	width: 300px;
	text-align: center;
}

.col2 {
	height: 26px;
	border: solid #66CC00;
	border-width: 2px;
	width: 870px;
	text-align: center;
	text-align: left
}
</style>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/pages/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(function(){
    	$("#addTable").hide();
    	$("#addQuestion").click(function(){
        	$("#addTable").show();
    	});
    });
</script>
</head>
<body>
	<div class=container>
		<div class="header">
			<div class="title">
				<br /> <font>问卷调研管理系统</font>
			</div>
			<div class="user">
				<font>欢迎您:admin&nbsp;&nbsp;</font>
			</div>
		</div>
		<div class="divide"></div>
		<div class="content">
			<div class="content-left">
				<ul>
					<li>调查课题管理
						<div>
							<ul>
								<li><a href="admin_allQuestionnaires.action?x=x">调查课题管理</a></li>
								<li><a href="admin_send.action?page=aq">添加新课题</a></li>
							</ul>
						</div>
					</li>
					<li>留言信息管理
						<div>
							<ul>
								<li><a href="admin_allMessages.action?x=x">留言信息管理</a></li>
							</ul>
						</div>
					</li>
					<li>注册用户管理
						<div>
							<ul>
								<li><a href="admin_allUsers.action?x=x">注册用户管理</a></li>
							</ul>
						</div>
					</li>
					<li>调查记录查询
						<div>
							<ul>
								<li><a href="admin_allQuestionnaires.action?x=x">调查记录查询</a></li>
							</ul>
						</div>
					</li>
					<li>修改个人密码
						<div>
							<ul>
								<li><a href="admin_send.action?page=cp">修改个人密码</a></li>
							</ul>
						</div>
					</li>
					<li>退出登录
						<div>
							<ul>
								<li><a href="login_logout.action?x=x">退出登录</a></li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
			<div class="content-right">
				<br />
				<div class="message">
					<font>${requestScope.message }</font>
				</div>
				<br />
				<div class="table-questionnaire">
					<table id="blocks">
						<caption>调查课题信息</caption>
						<tr>
							<th class="col1-1">创建时间</th>
							<th class="col1-2">标题</th>
							<th class="col1-3">描述</th>
							<th class="col1-4">调查时间(分钟)</th>
							<th class="col1-5">是否使用</th>
						</tr>
						<tr>
							<td class="col1-1">${requestScope.questionnaire.createTimeView }</td>
							<td class="col1-2">${requestScope.questionnaire.title}</td>
							<td class="col1-3">${requestScope.questionnaire.description }</td>
							<td class="col1-4">${requestScope.questionnaire.surveyTime }</td>
							<c:choose>
							  <c:when test="${requestScope.questionnaire.isUsed eq 1 }">
							    <td class="col1-5">是</td>
							  </c:when>
							  <c:otherwise>
							    <td class="col1-5">否</td>
							  </c:otherwise>
							</c:choose>
						</tr>
					</table>
				</div>
				<br /> <br />
				<div class="table-questions">
					<table id="blocks">
						<caption>课题问题 &nbsp;<button id="addQuestion">添加问题</button></caption>
						<tr>
							<th class="col2-2">问题</th>
							<th class="col2-3">问题类型</th>
							<th class="col2-4">A选项</th>
							<th class="col2-5">B选项</th>
							<th class="col2-6">C选项</th>
							<th class="col2-7">D选项</th>
							<th class="col2-8">操作</th>
						</tr>
						<c:forEach var="question"
							items="${requestScope.questionnaire.questions }">
							<tr>
								<td class="col2-2">${question.content }</td>
								<c:choose>
								  <c:when test="${question.type eq 1 }">
								    <td class="col2-3">单选题</td>
								  </c:when>
								  <c:otherwise>
								    <td class="col2-3">多选题</td>
								    </c:otherwise>
								</c:choose>
								<c:forEach var="option" items="${question.options }">
								  <td class="col2-4">${option.content }</td>								
								</c:forEach>
								<td class="col2-4"><a href="admin_deleteQuestion.action?qnid=${requestScope.questionnaire.id }&qid=${question.id }">删除</a></td>
							</tr>
						</c:forEach>
					</table>
				</div>
				<br/><br/>
				<div id="addTable" class="table">
					<form action="admin_addQuestion.action" method="post">
					    <input type="hidden" name="qid" value="${requestScope.questionnaire.id }">
						<table>
							<tr>
								<td class="col1">问题</td>
								<td class="col2"><input name="content" type="text">
								</td>
							</tr>
							<tr>
								<td class="col1">问题类型</td>
								<td class="col2"><select name="type">
										<option value="1">单选题</option>
										<option value="2">多选题</option>
								</select></td>
							</tr>
							<tr>
								<td class="col1">A选项</td>
								<td class="col2"><input name="optionA" type="text">
								</td>
							</tr>
							<tr>
								<td class="col1">B选项</td>
								<td class="col2"><input name="optionB" type="text">
								</td>
							</tr>
							<tr>
								<td class="col1">C选项</td>
								<td class="col2"><input name="optionC" type="text">
								</td>
							</tr>
							<tr>
								<td class="col1">D选项</td>
								<td class="col2"><input name="optionD" type="text">
								</td>
							</tr>
							<tr>
								<td class="col1">操作</td>
								<td class="col2"><input type="submit" value="提交">&nbsp;&nbsp;
									<input type="reset" value="重置">&nbsp;&nbsp;
									<button>返回</button></td>
							</tr>
						</table>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>